<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>list(列表)</title>
<!-- KUI -->
<link rel="stylesheet" href="../../../style/kelat.css" media="all"/>
<!-- 扩展样式 -->
<link rel="stylesheet" href="../../../style/theme.css" media="all"/>

</head>
<body >
<div>
   <div class="HelpBox">
   
    <h2>list(列表)</h2>
    <h3>概述</h3>
    <div class="desc">
      <p>列表是种多功能且强大的交互组件。列表将数据展现在一个可滚动的多行的列表中，可以将数据划分成不同的片段/组</p>
      <p>列表有以下用途：</p>
      <ul class="List">
		<li>让用户可以浏览结构化的多级数据</li>
		<li>展现一个索引列表</li>
		<li>在可视化的不同分组中，显示详细信息和控件</li>
		<li>展现一个可以选择的列表</li>
	  </ul>
    </div>
    <div class="example GridShow">
      <h3>实例</h3>
      <h4>列表:</h4>
      <pre><code>&lt;ul class="ListBlock">
    &lt;li class="ListItem">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-user.svg" />
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle">&lt;/div>
                &lt;div class="ItemAfter">&lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/li>
&lt;/ul>
</code></pre>
<p>其中：</p>
<ul class="List">
	<li>ItemCon - ItemMedia 和 ItemInner 的主要弹性(flex)容器。必选元素。</li>
	<li>ItemMedia - 媒体元素（如图标，图片等）的容器。可选元素。</li>
	<li>ItemInner - ItemTitle和 ItemAfter 的主要弹性(flex)容器。必选元素。</li>
	<li>ItemTitle - 单行列表项目标题。必选元素。</li>
	<li>ItemAfter - 列表项目标签。可以包含任意额外的html元素（例如标签文本、徽章、switch/toggle、按钮等等）。可选元素。</li>
</ul>

      <h4>展示效果:</h4>
      <ul class="ListBlock" style="width:50%">
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="../../../images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Ivan Petrov
					</div>
					<div class="ItemAfter">
					CEO
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="../../../images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					John Doe
					</div>
					<div class="ItemAfter">
					<span class="Badge BadgePrimary">13</span>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="../../../images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Jenna Smith
					</div>
				</div>
			</div>
		</li>
	</ul>
		<h4>链接元素</h4>
<pre><code>&lt;ul class="ListBlock">
    &lt;li class="ListItem">
      &lt;a class="ItemLink">
        &lt;div class="ItemCon">
            &lt;div class="ItemMedia">
                &lt;img class="Icon" src="../../../images/svg/iconfont-user.svg" />
            &lt;/div>
            &lt;div class="ItemInner">
                &lt;div class="ItemTitle">&lt;/div>
                &lt;div class="ItemAfter">&lt;/div>
            &lt;/div>
        &lt;/div>
      &lt;/a>
    &lt;/li>
&lt;/ul>
</code></pre>
<p>当然，多数情况下我们需要将列表中的元素当作链接使用(a)，来指向其他页面或者其他数据。在这种情况下，我们需要将“ItemCon”包裹在&lt;a class="ItemLink">元素中：</p>
 <h4>展示效果:</h4>
      <ul class="ListBlock" style="width:50%">
		<li class="ListItem">
			<div class="ItemCon ItemLink InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="../../../images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					John Doe
					</div>
					<div class="ItemAfter">
					<span class="Badge BadgePrimary">13</span>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon ItemLink InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="../../../images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Jenna Smith
					</div>
				</div>
			</div>
		</li>
	</ul>
	<h4>列表分割元素</h4>
	<p>列表分隔元素是一个简单的列表元素并包含标题，它在视觉上分隔两个列表元素：</p>
<pre><code>&lt;li class="ItemDivider">列表分割&lt;/li></code></pre>    
 <h4>展示效果:</h4>
      <ul class="ListBlock" style="width:50%">
		<li class="ListItem">
			<div class="ItemCon ItemLink InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="../../../images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					John Doe
					</div>
					<div class="ItemAfter">
					<span class="Badge BadgePrimary">13</span>
					</div>
				</div>
			</div>
		</li>
		<li class="ItemDivider">列表分割</li>
		<li class="ListItem">
			<div class="ItemCon ItemLink InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="../../../images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					Jenna Smith
					</div>
				</div>
			</div>
		</li>
	</ul>
	<h4>分组列表</h4>
	<p>有时我们需要将列表区里的元素分组，在这种情况下，我们需要用额外的分组元素：</p>
	<pre><code>&lt;div class="ListBlock">
    &lt;div class="ListGroup">
        &lt;ul>
            &lt;li class="ListItem GroupTitle">标题A&lt;/li>
            &lt;li class="ListItem">
                &lt;div class="ItemCon InkRipple">
                    &lt;div class="ItemInner">
                        &lt;div class="ItemTitle">Aaron&lt;/div>
                    &lt;/div>
                &lt;/div>
            &lt;/li>
            &lt;li class="ListItem">
                &lt;div class="ItemCon InkRipple">
                    &lt;div class="ItemInner">
                        &lt;div class="ItemTitle">Adam&lt;/div>
                    &lt;/div>
                &lt;/div>
            &lt;/li>
        &lt;/ul>
    &lt;/div>
&lt;/div>
</code></pre>
	<h4>展示效果:</h4>
	<div class="ListBlock" style="width:50%">
		<div class="ListGroup">
			<ul>
				<li class="ListItem GroupTitle">
					标题A
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Aaron 
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Abbie
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Adam
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="ListGroup">
			<ul>
				<li class="ListItem GroupTitle">
					标题B
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Bailey 
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Barclay
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="ListGroup">
			<ul>
				<li class="ListItem GroupTitle">
					标题C
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Caiden 
							</div>
						</div>
					</div>
				</li>
				<li class="ListItem">
					<div class="ItemCon InkRipple">
						<div class="ItemInner">
							<div class="ItemTitle">
							Candy
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<h4>内嵌列表区域:</h4>
	<p>列表区还有内嵌（非全屏）样式，只需要给列表区域元素加上“Inset”类</p>
	<pre><code>&lt;div class="ListBlock Inset"></code></pre> 
	<h4>圆角块级列表区域:</h4>
	<p>增加“ListCard”可以使列表以圆角块级展示</p>
	<pre><code>&lt;div class="ListBlock ListCard"></code></pre> 
	<h4>自适应列表区域:</h4>
	<p>平板电脑适用</p>
	<pre><code>&lt;div class="ListBlock ListTabletInset"></code></pre> 
	
	
	
	
	
   </div>

</div>
</div>
</body>
</html>
